@import './base/fn.less';
@popupPrefixCls: oreo-popup;
.@{popupPrefixCls} {
    position: absolute;
    background: #fff; // top: 50%;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    transition: all 0.4s cubic-bezier(0.55, 0, 0.1, 1);
    max-height: 100%;
    &_top {
      width: 100%;
      // max-height: 80vh;
      height: auto;
      overflow: auto;
      top: 0;
      left: 0;
      transform: translate3d(0, 0, 0);
    }
    &_right {
      top: 0;
      right: 0;
      left: auto;
      bottom: 0;
      height: 100%;
      overflow: auto;
      // max-width: 90vw;
      transform: translate3d(0, 0, 0);
    }
    &_bottom {
      width: 100%;
      // max-height: 80vh;
      height: auto;
      overflow: auto;
      bottom: 0;
      left: 0;
      top: auto;
      transform: translate3d(0, 0, 0);
    }
    &_left {
      top: 0;
      right: auto;
      left: 0;
      bottom: 0;
      height: 100%;
      overflow: auto;
      // max-width: 90vw;
      transform: translate3d(0, 0, 0);
    }
    &_fullscreen {
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      transform: none;
      background: #fff;
    }
  }
  
  .@{popupPrefixCls}-slide_top {
    &-enter,
    &-leave-active {
      transform: translate3d(0, -100%, 0);
    }
  }
  .@{popupPrefixCls}-slide_bottom {
    &-enter,
    &-leave-active {
      transform: translate3d(0, 100%, 0);
    }
  }
  .@{popupPrefixCls}-slide_left {
    &-enter,
    &-leave-active {
      transform: translate3d(-100%, 0, 0);
    }
  }
  .@{popupPrefixCls}-slide_right {
    &-enter,
    &-leave-active {
      transform: translate3d(100%, 0, 0);
    }
  }